var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');

// 怪物对象
var monster = {
	x: 10,
	y: 30,
	size: 20
}

// 动画循环函数
function animate() {
	// 更新操作,每帧位移10像素
	monster.x += 10;
	requestAnimationFrame(animate); 
}
// 进入动画循环
animate();
// 怪物对象
var monster = {
	x: 10,
	y: 30,
	size: 20
}
// 首次绘制
context.drawImage(img, monster.x, monster.y, monster.size, monster.size);
// 动画执行函数
function animate() {
	// 设置定时来不断执行 animate
	requestAnimationFrame(animate); 
}
// 动画执行函数
function animate() {
	// 更新操作,每帧位移10像素
	monster.x += 10;
	// 清除操作（主要是：清理画布）
	context.clearRect(0, 0, canvas.clientWidth, canvas.clientHeight);
	// 设置定时来不断执行 animate
	requestAnimationFrame(animate); 
}
// 进入动画循环
animate();
// 动画执行函数
function animate() {
	// 如果大于等于目标位置，则退出循环
	if(monster.x >= 50) {
		return;
	}
	// 更新操作,每帧位移10像素
	monster.x += 10;
	// 清除操作（主要是：清理画布）
	context.clearRect(0, 0, canvas.clientWidth, canvas.clientHeight);
	// 绘制操作
	context.drawImage(img, monster.x, monster.y, monster.size, monster.size);
	// 设置定时来不断执行 animate
	requestAnimationFrame(animate); 
}
// 进入动画循环
animate();

// 怪物对象
var monster = {
	x: 10,
	y: 30,
	size: 20
}

// 画monster
context.drawImage(monsterImg, monster.x, monster.y, monster.size, monster.size);